<template>
  <!-- 普通报价 -->
  <div class="my-order">
    <div class="my-order-header">
      <!-- <el-radio-group v-model="ruleForm.status" :fill="ruleForm.status == '301' ? '#FA6400' : ''" size="small">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="100">待报价</el-radio-button>
        <el-radio-button label="200">待确认报价</el-radio-button>
        <el-radio-button label="201">待生成订单</el-radio-button>
        <el-radio-button label="200">已报价</el-radio-button>
        <el-radio-button label="202">已生成订单</el-radio-button>
        <el-radio-button label="301" fill="#FA6400">超期未报价</el-radio-button>
        <el-radio-button label="300">无法报价</el-radio-button>
      </el-radio-group> -->
      <el-tabs v-model="ruleForm.status">
        <el-tab-pane label="待报价" name="100"></el-tab-pane>
        <el-tab-pane label="待确认报价" name="200"></el-tab-pane>
        <el-tab-pane label="待生成订单" name="201"></el-tab-pane>
        <el-tab-pane label="已生成订单" name="202"></el-tab-pane>
        <el-tab-pane label="超期未报价" name="301"></el-tab-pane>
        <el-tab-pane label="无法报价" name="300"></el-tab-pane>
      </el-tabs>
      <div class="search">
        <div class="my-order-form">
          <el-form class="search-form" ref="form" :model="ruleForm" label-width="76px">
            <el-form-item label="型号" prop="partnumber" class="label-name">
              <el-input v-model="ruleForm.partnumber" @keyup.enter.native="handleQuery" clearable size="small"
                placeholder="请输入型号"></el-input>
            </el-form-item>
            <el-form-item label="品牌" prop="brand" class="label-name">
              <el-input v-model="ruleForm.brand" @keyup.enter.native="handleQuery" clearable size="small"
                placeholder="请输入品牌"></el-input>
            </el-form-item>
            <!-- <el-form-item v-show="ruleForm.status == '200' || ruleForm.status == ''" label="报价状态:" prop="quotestatus">
            <el-select v-model="ruleForm.quotestatus" @change="handleQuery" clearable>
              <el-option label="全部" value=""></el-option>
              <el-option label="待采纳" value="100"></el-option>
              <el-option label="已采纳" value="200"></el-option>
              <el-option label="未采纳" value="201"></el-option>
              <el-option label="已生成订单" value="300"></el-option>
              <el-option label="待议价" value="101"></el-option>
            </el-select>
          </el-form-item> -->

            <el-form-item
              :label="ruleForm.status == '200' || ruleForm.status == '201' || ruleForm.status == '202' ? '报价时间' : '交货日期'"
              prop="date" class="dataItem">
              <mydate @getSelectData="getCreateDate" :createDate="ruleForm.date"></mydate>
              <!-- <el-date-picker v-model="ruleForm.date"
                            @change="handleQuery"
                            style="width: 250px;"
                            size="small"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions">
            </el-date-picker> -->
            </el-form-item>
          </el-form>
        </div>
        <div class="search-btn">
            <div class="elbtn">
              <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
              <el-button size="small" class="resletBtn" @click="handleReset">重置</el-button>
            </div>
          </div>
      </div>

    </div>
    <!-- :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}" -->
    <div class="my-order-footer">
      <el-table :data="tableData" size="mini" v-loading="loading" v-adaptive="{ bottomOffset: 80 }" height="300px"
        ref="table" width="100%" border>
        <!-- <el-table-column
          :index="
            (index) => (ruleForm.page - 1) * ruleForm.pageSize + index + 1
          "
          type="index"
          width="50"
        >
        </el-table-column> -->
        <el-table-column label="操作" key="c1" v-if="ruleForm.status == '100'" align="center" width="80px">
          <template slot-scope="{ row }">
            <!-- <el-button type="text" class="btn" :disabled="0 == row.quoteRemainMin * 1 || row.limitQuoteCount <= row.quoteCount"
              @click="handleQuote(row)" v-if=" 0 <row.quoteCount < 1">
              {{ (0 == row.quoteRemainMin * 1 || row.limitQuoteCount <= row.quoteCount) ? "--" : "报价" }}</el-button> -->
            <el-button type="text" class="btn" @click="handleQuote(row)"
              v-if="0 < row.quoteCount < 1 && row.quoteRemainMin != 0">报价</el-button>
            <!-- <el-button type="text" class="btn" @click="handleQuote(row)" :disabled="0 == row.quoteRemainMin * 1"
              v-if="0 == row.quoteRemainMin * 1">--</el-button> -->
            <!-- <el-button type="text" v-show="row.quoteRemainMin != 0 && row.quoteCount == row.limitQuoteCount" class="btn"
              @click="handleShowDetail(row)">查看</el-button>
            <el-button type="text" class="btn" style="margin-left:0 !important" @click="handleReQuote(row)"
              v-if="row.quoteRemainMin != 0 && row.quoteCount >= 1">再次报价</el-button> -->
          </template>
        </el-table-column>
        <el-table-column label="操作" key="c2" v-if="ruleForm.status == '200'" align="center">
          <template slot-scope="{ row }">
            <!-- <el-button type="text" v-if="
              0 >= row.quoteRemainMin * 1 ||
              row.limitQuoteCount <= row.quoteCount
            " class="btn" @click="handleShowDetail(row)">
              查看</el-button>
            <el-button type="text" class="btn" v-else @click="handleReQuote(row)">
              再次报价</el-button> -->
            <el-button type="text" v-show="row.quoteCount == row.limitQuoteCount" class="btn"
              @click="handleShowDetail(row)">查看</el-button>
            <el-button type="text" class="btn" style="margin-left:0 !important" @click="handleReQuote(row)"
              v-if="row.quoteCount < row.limitQuoteCount">再次报价</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" key="c3" v-if="ruleForm.status == '201' || ruleForm.status == '202'" align="center">
          <template v-slot="{ row }">
            <el-button type="text" class="btn" @click="handleShowNewDetail(row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="参与度" prop="hotLevel" key="hotLevel" v-if="ruleForm.status == '301'">
          <template slot-scope="{ row }">
            <template v-for="item in row.hotLevel * 1">
              <svg-icon icon-class="fire" :key="item" style="width: 21px; height: 21px" />
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="inquiryType" label="询价类型" width="80px">
          <template v-slot="{ row }">
            <p v-if="row.inquiryType == '' || row.inquiryType == null || row.inquiryType == 0">-</p>
            <span v-else>{{ row.inquiryType }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="quoteRemainMin" key="quoteRemainMin1"
          v-if="ruleForm.status == '100' || ruleForm.status == ''" label="剩余报价时间">
          <template v-slot="{ row }">
            <p style="color: #e02020">
              {{
                (0 >= row.quoteRemainMin * 1 ? "已结束" : row.quoteRemainMin)
                | manageTime
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="time" key="quoteCount" v-if="ruleForm.status == '200' || ruleForm.status == ''"
          label="报价次数">
          <template v-slot="{ row }">
            <p v-if="row.quoteCount == '' || row.quoteCount == null || row.quoteCount == 0">-</p>
            <span v-else :style="row.quoteCount >= row.limitQuoteCount ? 'color:#E02020' : ''
              ">
              {{ row.quoteCount }}/{{ row.limitQuoteCount }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="quotePlace" key="quotePlace" v-if="ruleForm.status == '200' || ruleForm.status == ''"
          label="价格位次">
          <template v-slot="{ row }">
            <p v-if="row.quotePlace == '' || row.quotePlace == null || row.quotePlace == 0">-</p>
            <span v-else>{{ row.quotePlace }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="product_partnumber" key="product_partnumber" label="型号" show-overflow-tooltip width="320px">
          <template v-slot="{ row }">
            <p v-if="row.product_partnumber == '' || row.product_partnumber == null || row.product_partnumber == 0">-</p>
            <span v-else>{{ row.product_partnumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="product_brand" key="product_brand" label="品牌" show-overflow-tooltip width="250px">
          <template v-slot="{ row }">
            <p v-if="row.product_brand == '' || row.product_brand == null || row.product_brand == 0">-</p>
            <span v-else>{{ row.product_brand }}</span>
          </template>
        </el-table-column>
        <!-- 数量在已报价与其他状态时筛选时字段不同 -->
        <el-table-column prop="quantity" key="quantity" label="数量">
          <template v-slot="{ row }">
            <template v-if="ruleForm.status == 200">
              <p
                v-if="(row.quote && row.quote.quantity) == '' || (row.quote && row.quote.quantity) == null || (row.quote && row.quote.quantity) == 0">
                -</p>
              <span v-else> {{ row.quote && row.quote.quantity }}</span>
            </template>
            <template v-else>
              <p v-if="row.quantity == '' || row.quantity == null || row.quantity == 0">-</p>
              <span v-else> {{ row.quantity }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="product_dateCode" key="product_dateCode" label="批次">
          <template v-slot="{ row }">
            <template v-if="ruleForm.status == 200">
              <p
                v-if="(row.quote && row.quote.product.dateCode) == '' || (row.quote && row.quote.product.dateCode) == null || (row.quote && row.quote.product.dateCode) == 0">
                -</p>
              <span v-else>{{ row.quote && row.quote.product.dateCode }}</span>
            </template>
            <template v-else>
              <p v-if="row.product_dateCode == '' || row.product_dateCode == null || row.product_dateCode == 0">-</p>
              <span v-else>{{ row.product_dateCode }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="product_package" key="product_package" label="封装" show-overflow-tooltip>
          <template v-slot="{ row }">
            <p v-if="row.product_package == '' || row.product_package == null || row.product_package == 0">-</p>
            <span v-else>{{ row.product_package }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="adoptPrice" key="adoptPrice" label="接受价" align="right">
          <template v-slot="{ row }">
            <p v-if="row.adoptPrice == '' || row.adoptPrice == null || row.adoptPrice == 0">
              -</p>
            <span v-else style="color:#00AB2B;">{{ Number.isInteger(row.adoptPrice) ? row.adoptPrice + '.00' :
              row.adoptPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="currency" key="currency"
          :label="(ruleForm.status == 100 || ruleForm.status == 301) ? '币种' : '询价币种'"
          v-if="ruleForm.status != 200 && ruleForm.status != 201 && ruleForm.status != '202'">
          <template v-slot="{ row }">
            <p v-if="row.currency == '' || row.currency == null || row.currency == 0">-</p>
            <span v-else> {{ row.currency == 'USD' ? '美元' : '人民币' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="quote" v-if="ruleForm.status == '200'" key="quote-inPrice-unitPrice" label="我的报价"
          align="right">
          <template v-slot="{ row }">
            <p
              v-if="(row.quote && row.quote.inPrice && row.quote.inPrice.unitPrice) == '' || (row.quote && row.quote.inPrice && row.quote.inPrice.unitPrice) == null || (row.quote && row.quote.inPrice && row.quote.inPrice.unitPrice) == 0">
              -</p>
            <span v-else style="color:#E37100"> {{ Number.isInteger(row.quote && row.quote.inPrice &&
              row.quote.inPrice.unitPrice) ? row.quote
              && row.quote.inPrice && row.quote.inPrice.unitPrice + '.00' : row.quote && row.quote.inPrice &&
            row.quote.inPrice.unitPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="costPrice" v-if="ruleForm.status == '201' || ruleForm.status == '202'" key="costPrice"
          label="我的报价" align="right">
          <template v-slot="{ row }">
            <p v-if="row.costPrice == '' || row.costPrice == null || row.costPrice == 0">
              -</p>
            <span v-else style="color:#E37100"> {{ Number.isInteger(row.costPrice) ? row.costPrice + '.00' : row.costPrice
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="quto"
          v-if="ruleForm.status == '200' || ruleForm.status == '201' || ruleForm.status == '202'"
          key="quote-inPrice-currency"
          :label="ruleForm.status == 200 || ruleForm.status == '201' || ruleForm.status == '202' ? '币种' : '报价币种'">
          <template v-slot="{ row }">
            <p
              v-if="(row.quote && row.quote.inPrice && row.quote.inPrice.currency) == '' || (row.quote && row.quote.inPrice && row.quote.inPrice.currency) == null || (row.quote && row.quote.inPrice && row.quote.inPrice.currency) == 0">
              -</p>
            <span v-else>{{ row.quote && row.quote.inPrice && row.quote.inPrice.currency == 'USD' || row.quote &&
              row.quote.inPrice && row.quote.inPrice.currency == '美元' || row.quote && row.quote.inPrice &&
              row.quote.inPrice.currency == 2 ? '美元' : '人民币' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deliveryDate" key="deliveryDate" label="交货日期" show-overflow-tooltip>
          <template v-slot="{ row }">
            <template v-if="ruleForm.status == 200">
              {{ row.quote && row.quote.deliveryDate.split(" ")[0] }}
            </template>
            <template v-else>
              {{ row.deliveryDate.split(" ")[0] }}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="deliveryPlace" key="deliveryPlace" label="交货地" show-overflow-tooltip>
          <template v-slot="{ row }">
            <template v-if="ruleForm.status == 200">
              <p
                v-if="(row.quote && row.quote.deliveryPlace) == '' || (row.quote && row.quote.deliveryPlace) == null || (row.quote && row.quote.deliveryPlace) == 0">
                -</p>
              <span v-else>{{
                row.quote &&
                (row.quote.deliveryPlace == "FArea01" ? "中国大陆" : "中国香港")
              }}</span>
            </template>
            <template v-else>
              <p v-if="row.deliveryPlace == '' || row.deliveryPlace == null || row.deliveryPlace == 0">-</p>
              <span v-else> {{ row.deliveryPlace == "FArea01" ? "中国大陆" : "中国香港" }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="quote" v-if="ruleForm.status == '200'" key="c11urrency" label="报价公司" show-overflow-tooltip>
          <template v-slot="{ row }">
            <p
              v-if="(row.quote && row.quote.supplier && row.quote.supplier.name) == '' || (row.quote && row.quote.supplier && row.quote.supplier.name) == null || (row.quote && row.quote.supplier && row.quote.supplier.name) == 0">
              -</p>
            <span v-else>{{ row.quote && row.quote.supplier && row.quote.supplier.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="supplierName" v-if="ruleForm.status == '201' || ruleForm.status == '202'"
          key="supplierName" label="报价公司" show-overflow-tooltip>
          <template v-slot="{ row }">
            <p v-if="row.supplierName == '' || row.supplierName == null || row.supplierName == 0">
              -</p>
            <span v-else>{{ row.supplierName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="product_packing" key="product_packing" label="包装" show-overflow-tooltip>
          <template v-slot="{ row }">
            <p v-if="row.product_packing == '' || row.product_packing == null || row.product_packing == 0">-</p>
            <span v-else>{{ row.product_packing }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="quoteRemainMin" v-if="ruleForm.status == '301'" key="quoteRemainMin" label="剩余报价时间">
          <template>
            <span style="color: #e02020">已结束</span>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="quote" v-if="ruleForm.status == '200' || ruleForm.status == ''" key="quote-status"
          label="报价状态" min-width="100">
          <template v-slot="{ row }">
            <p
              v-if="(row.quote && row.quote.statusDesc) == '' || (row.quote && row.quote.statusDesc) == null || (row.quote && row.quote.statusDesc) == 0">
              -</p>
            <span v-else>{{ row.quote && row.quote.statusDesc }}</span>
            <span v-else>
              <span v-if="row.quote && row.quote.statusDesc == '待采纳'">
                <div style="width:8px;height:8px;background:#FFB300;border-radius: 50%;display: inline-block;margin-right: 5px;"></div>
                <span>{{ row.quote && row.quote.statusDesc }}</span>
              </span>
              <span v-else-if="row.quote && row.quote.statusDesc == '已采纳'">
                <div style="width:8px;height:8px;background:#FF8080;border-radius: 50%;display: inline-block;margin-right: 5px;"></div>
                <span>{{ row.quote && row.quote.statusDesc }}</span>
              </span>
              <span v-else-if="row.quote && row.quote.statusDesc == '未采纳'">
                <div style="width:8px;height:8px;background:#AF80FF;border-radius: 50%;display: inline-block;margin-right: 5px;"></div>
                <span>{{ row.quote && row.quote.statusDesc }}</span>
              </span>
              <span v-else-if="row.quote && row.quote.statusDesc == '已生成订单'">
                <div style="width:8px;height:8px;background:#2348E8;border-radius: 50%;display: inline-block;margin-right: 5px;"></div>
                <span>{{ row.quote && row.quote.statusDesc }}</span>
              </span>
              <span v-else-if="row.quote && row.quote.statusDesc == '待议价'">
                <div style="width:8px;height:8px;background:#FFB300;border-radius: 50%;display: inline-block;margin-right: 5px;"></div>
                <span>{{ row.quote && row.quote.statusDesc }}</span>
              </span>
              <span v-else-if="row.quote && row.quote.statusDesc == '无法议价'">
                <div style="width:8px;height:8px;background:#BFBFBF;border-radius: 50%;display: inline-block;margin-right: 5px;"></div>
                <span>{{ row.quote && row.quote.statusDesc }}</span>
              </span>
              <span v-else>
                <div style="width:8px;height:8px;background:#00AB2B;border-radius: 50%;display: inline-block;margin-right: 5px;"></div>
                <span>{{ row.quote && row.quote.statusDesc }}</span>
              </span>
            </span>
          </template>
        </el-table-column> -->

        <!-- 报价有效期 -->
        <!-- <el-table-column 
          prop="termDate"
          v-if="ruleForm.status=='200'"
          key="termDate-status"
          label="报价有效期"
          min-width="140"
        >
          <template v-slot="{row}">
            {{row.historyQuotes && row.historyQuotes[0].termDate}}
          </template>
        </el-table-column> -->

        <el-table-column prop="quote.id" v-if="ruleForm.status == '200' || ruleForm.status == ''" key="quote-id"
          label="报价单号" show-overflow-tooltip>
          <template v-slot="{ row }">
            <p
              v-if="(row.quote && row.quote.id) == '' || (row.quote && row.quote.id) == null || (row.quote && row.quote.id) == 0">
              -</p>
            <span v-else>{{ row.quote && row.quote.id }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="inquiryID" key="inquiryID" label="询价单号" v-if="ruleForm.status != 301"
          show-overflow-tooltip>
          <template v-slot="{ row }">
            <p v-if="row.inquiryID == '' || row.inquiryID == null || row.inquiryID == 0">-</p>
            <span v-else>{{ row.inquiryID }}</span>
          </template>
        </el-table-column>
        <el-table-column label="参与度" prop="hotLevel" key="hotLevel" v-if="ruleForm.status == ''">
          <template slot-scope="{ row }">
            <p v-if="row.hotLevel == '' || row.hotLevel == null || row.hotLevel == 0">-</p>
            <template v-for="item in row.hotLevel * 1">
              <svg-icon icon-class="fire" :key="item" style="width: 21px; height: 21px" />
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="noQuoteTime" v-if="ruleForm.status == '301' || ruleForm.status == ''" key="noQuoteTime"
          label="超期次数">
          <template v-slot="{ row }">
            <p v-if="row.noQuoteTime == '' || row.noQuoteTime == null || row.noQuoteTime == 0">-</p>
            <span v-else>{{ row.noQuoteTime }}</span>
          </template>
        </el-table-column>
        <template slot="empty">
          <img src="@/assets/images/noneData.svg" alt="" class="nullDataImg" />
        </template>
      </el-table>
      <pagination :page.sync="ruleForm.page" :total.sync="total" :limit.sync="ruleForm.pageSize"
        layout=" total,sizes,prev, pager, next, jumper" @pagination="doSearch" v-if="total > 0"></pagination>
    </div>
    <el-drawer title="" size="560px" :visible.sync="againDrawerVisible" v-if="againDrawerVisible">
      <div slot="title" class="drawer">
        <span class="title">
          供应商报价
        </span>
        <span class="inquiryID">询价单号：{{ qutoData.inquiryID }}</span>
        <!-- <el-divider /> -->
      </div>

      <!-- <quto :qutoData="qutoData" :isActurl="false" v-if="ruleForm.status == '100'" :isShowCheckbox="false"
        @close="(drawerVisible = !drawerVisible), handleQuery()" />
      <detail :qutoData="qutoData" :isActurl="false" v-else-if="
        ruleForm.status == '200' &&
        (0 >= qutoData.quoteRemainMin * 1 ||
          qutoData.limitQuoteCount <= qutoData.quoteCount)
      " @close="drawerVisible = !drawerVisible" /> -->
      <requto :qutoData="qutoData" :isActurl="false" :isShowCheckbox="false"
        @close="(againDrawerVisible = !againDrawerVisible), handleQuery()" />
    </el-drawer>
    <el-drawer title="" size="560px" :visible.sync="drawerVisible" v-if="drawerVisible">
      <div slot="title" class="drawer">
        <span class="title">
          供应商报价
        </span>
        <span class="inquiryID">询价单号：{{ qutoData.inquiryID }}</span>
      </div>
      <!-- <el-divider /> -->

      <quto :qutoData="qutoData" :isActurl="false" v-if="ruleForm.status == '100'" :isShowCheckbox="false"
        @close="(drawerVisible = !drawerVisible), handleQuery()" />
      <detail :qutoData="qutoData" :isActurl="false" v-else-if="ruleForm.status == '200' &&
        (0 >= qutoData.quoteRemainMin * 1 ||
          qutoData.limitQuoteCount <= qutoData.quoteCount)
        " @close="drawerVisible = !drawerVisible" />
      <!-- <requto :qutoData="qutoData" :isActurl="false" :isShowCheckbox="false" v-else
        @close="(drawerVisible = !drawerVisible), handleQuery()" /> -->
      <newDetail :qutoData="qutoData" v-else-if="ruleForm.status == '201' || ruleForm.status == '202'"
        @close="drawerVisible = !drawerVisible" />
    </el-drawer>
  </div>
</template>
<script>
import quto from "../components/quto";
import requto from "../components/requto";
import detail from "../components/details";
import newDetail from "../components/newDetails";
import Pagination from "@/components/Pagination";
import mydate from "@/components/Date/index.vue";
import { getNormalList, getList } from "@/api/scsapi/index";

export default {
  name: "commonOffer",
  components: {
    Pagination,
    quto,
    requto,
    detail,
    mydate,
    newDetail
  },
  data() {
    return {
      loading: false,
      ruleForm: {
        status: "100",
        partnumber: "",
        brand: "",
        date: [],
        // quotestatus: "",
        page: 1,
        pageSize: 20,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [],
      total: 0,
      drawerVisible: false,
      againDrawerVisible: false,
      qutoData: {},
      interval: null,
    };
  },
  created() {
    this.handleQuery();
  },
  watch: {
    "ruleForm.status": function (nv, ov) {
      // 切换到不同状态时切换筛选值
      if (nv == 200) {
        this.ruleForm.date = [];
        this.ruleForm.brand = "";
      }
      if (ov == 200) {
        this.ruleForm.date = [];
        // this.ruleForm.quotestatus = "";
      }
      this.ruleForm.page = 1;
      this.handleQuery();
      this.reset();
    },
  },
  methods: {
    // 交货日期
    getCreateDate(date) {
      this.ruleForm.date = date;
    },
    // 获取数据
    handleQuery() {
      this.ruleForm.page = 1;
      this.doSearch();
    },
    doSearch() {
      this.tableData = [];
      this.loading = true;
      getList(this.ruleForm)
        .then((res) => {
          if (res.status == 200) {
            res.data.rows.forEach((x) => {
              for (let y in x.product) {
                x["product_" + y] = x.product[y];
              }
            });
            this.tableData = res.data.rows;
            if (this.interval) {
              clearInterval(this.interval);
            }
            if (this.tableData.some((x) => x.quoteRemainMin * 1 > 0)) {
              this.interval = setInterval(() => {
                this.tableData.map((x) => {
                  if (x.quoteRemainMin > 0) {
                    x.quoteRemainMin--;
                    if (x.quoteRemainMin <= 0) {
                      this.$refs.table.toggleRowSelection(x, false);
                    }
                  }
                });
              }, 1000);
            }

            this.total = res.data.total;
          }

          this.loading = false;
        })
        .catch(() => {
          this.loading2 = false;
        });
    },
    // 报价
    handleQuote(row) {
      console.log('row', row)
      this.qutoData = row;
      this.drawerVisible = true;
    },
    handleReQuote(row) {
      this.qutoData = row;
      this.againDrawerVisible = true;
    },
    handleShowDetail(row) {
      this.qutoData = row;
      console.error(row);
      this.drawerVisible = true;
    },
    handleShowNewDetail(row) {
      this.qutoData = row;
      console.error(row);
      this.drawerVisible = true;
    },
    // 重置
    handleReset() {
      this.$refs["form"].resetFields();
      this.handleQuery();
    },
    reset(){
      this.$refs["form"].resetFields();
    }
  },
  filters: {
    manageTime(v) {
      // console.log('tag', v)
      if (!v || isNaN(v)) {
        return v;
      } else {
        // let days = parseInt(v / (1000 * 60 * 60 * 24));
        // let hour = parseInt(v / 3600);
        // let min = parseInt((v - hour * 60 * 60) / 60);
        // let sec = parseInt((v % 3600) - min * 60);
        // return `${hour < 10 ? "0" + hour : hour}:${min < 10 ? "0" + min : min
        //   }:${sec < 10 ? "0" + sec : sec}`;
        let days = parseInt(v / (60 * 60 * 24));
        let hour = parseInt((v % 86400) / 3600);
        let min = parseInt((v % 3600) / 60);
        return `${days}天${hour}时${min}分`
      }
    },
  },
};
</script>

<style scoped lang="scss" src="@/assets/styles/public.scss"></style>

<style lang="scss" scoped>
.my-order {
  // margin: 0 14px;
  margin-top: 15px;

  .my-order-header {
    margin-bottom: 10px;

    ::v-deep.el-tabs__header {
      margin-bottom: px !important;
    }

    ::v-deep.el-tabs__item {
      font-weight: 600 !important;
    }

    ::v-deep.el-tabs__item:hover {
      color: #1A2035 !important;
    }

    ::v-deep.el-tabs__item.is-active {
      color: #1A2035 !important;
    }

    ::v-deep.el-tabs__active-bar {
      background: #2348E8 !important;
    }

    ::v-deep.el-tabs__nav-wrap::after {
      height: 1px !important;
    }
    
  }
  .search {
    display: flex;
    width: 100%;

    .my-order-form {
      border-radius: 5px;
      margin-bottom: 15px;

      .search-form {
        display: flex;
        // flex-wrap: wrap;

        .label-name {
          ::v-deep .el-form-item__label {
            letter-spacing: 18px !important;
            text-align: right !important;
          }
        }

        .el-form-item {
          width: 30%;
          margin-bottom: 0 !important;
          margin-right: 40px;

          ::v-deep.el-form-item__label {
            font-weight: 400 !important;
            width: 76px;
            height: 28px;
            background: #F0F0F0;
            text-align: center;
            color: #1A2035;
          }

          ::v-deep.el-input__inner {
            width: 100%;
            border-radius: 0 2px 2px 0;
          }
        }

        .dataItem {
          margin-right: 22px;
        }
      }


    }
  }

  .search-btn {
    display: flex;
    width: 240px;
  }
 

}

::v-deep .el-drawer__header {
  // margin-bottom: 0px !important;
  // padding: 15px 38px 15px 32px !important;
  align-items: baseline;

  .drawer {
    .title {
      color: #1A2035;
      font-weight: 600;
      margin-right: 10px;
      font-size: 14px;
    }

    .inquiryID {
      font-size: 12px;
      color: #333;
      font-weight: 400;
    }
  }

  .el-divider {
    // margin: 0 0 20px 0;

  }
}

::v-deep .el-radio-button {
  margin: 0 15px;

  .el-radio-button__inner {
    border-left: 1px solid #dcdfe6;
    box-shadow: none !important;
    border-radius: 4px !important;
  }
}


::v-deep.el-table tbody .cell {
  height: 32px !important;
  line-height: 32px !important;

  p {
    margin: 0 !important;
  }

  span {
    font-size: 12px !important;
  }
}
</style>















